import React, { Component } from 'react'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import * as actions from '../../actions/index'
import 'antd/dist/antd.css'
import { Drawer, Button } from 'antd'

class Edit extends Component {

    state = { 
        visible: false,
        nickName: '',
        name: '',
        email: '',
        tel: '',
        id: '',
        flag: false,
        flag2: false
     };

    showDrawer = () => {
        this.setState({
            visible: true,
            nickName: this.props.item.nickName,
            name: this.props.item.name,
            email: this.props.item.email,
            tel: this.props.item.tel,
            id: this.props.item.id
        });
    };

    onClose = () => {
        this.setState({
            visible: false,
        });
    }

    changeData(name, value) {
        this.setState({
            [name]: value
        })
    }

    //保存
    editBtn() {

        let obj = {
            nickName: this.state.nickName,
            name: this.state.name,
            email: this.state.email,
            tel: this.state.tel,
            id: this.state.id,
            flag: this.state.flag
        }

        this.setState({
            visible: false
        })

        this.props.edit_Btn(obj)
    }

    clickBtn() {
        this.setState({
            flag: !this.state.flag,
        })
    }

    clickBtn2() {
        this.setState({
            flag2: !this.state.flag2
        })
    }

    render() {
        let { nickName, name, email, tel, flag, flag2 } = this.state
        return (
            <div>
                <div>
                    <Button type="primary" onClick={this.showDrawer}>
                        编辑
                    </Button>
                </div>
                <Drawer
                    title="编辑"
                    placement="right"
                    closable={false}
                    onClose={this.onClose}
                    visible={this.state.visible}
                    getContainer={false}
                    style={{ position: 'absolute' }}
                >
                    <p>
                        成员昵称：
                        <input value={nickName} onChange={ e => {this.changeData('nickName', e.target.value)}} />
                    </p>
                    <p>
                        真实姓名：
                        <input value={name} onChange={ e => {this.changeData('name', e.target.value)}} />
                    </p>
                    <p>
                        邮箱：
                        <input value={email} onChange={ e => {this.changeData('email', e.target.value)}} />
                    </p>
                   
                    <p>
                        手机号：
                        <input value={tel} onChange={ e => {this.changeData('tel', e.target.value)}} />
                    </p>
                    
                    <p>
                        用户组*：
                        <span><input type='checkbox' checked={flag} onChange={this.clickBtn.bind(this)}/>公司管理员</span>
                        <span><input type='checkbox' checked={flag2} onChange={this.clickBtn2.bind(this)}/>公司普通成员</span>
                    </p>
                    <p>
                        <Button onClick={
                            this.editBtn.bind(this)
                        }>保存</Button>
                        <Button>取消</Button>
                    </p>
                </Drawer>
            </div>
        )
    }
}

let mapStateToProps = ({dataReducer}) => {
    return {
        ...dataReducer
    }
}

let mapDispatchToProps = (dispatch) => bindActionCreators(actions, dispatch)
 
export default connect(mapStateToProps, mapDispatchToProps)(Edit)